<template>
  <section class="featured-section">
    <el-row :gutter="24" justify="center">
      <el-col
        v-for="drink in drinks"
        :key="drink.id"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
      >
        <div
          class="drink-card"
        >
          <div class="overlay">
            <h3>{{ drink.name }}</h3>
            <p>{{ drink.description }}</p>
          </div>
        </div>
      </el-col>
    </el-row>
  </section>

  
</template>

<script setup>
import { ref } from 'vue'

const drinks = ref([
  {
    id: 1,
    name: '火山拿铁',
    description: '浓郁醇香，牛奶与火山豆完美融合',
    image: '/mock-img.jpg'
  },
  {
    id: 2,
    name: '冷萃火山冰',
    description: '冰滴24小时，清新回甘，夏日首选',
    image: '/mock-img.jpg'
  },
  {
    id: 3,
    name: '熔岩摩卡',
    description: '巧克力与咖啡的绵密交汇',
    image: '/mock-img.jpg'
  }
])
</script>

<style scoped>
.featured-section {
  padding: 80px 20px;
  background: #fefcf9;
  width: 1000px;
  margin: 0 auto;
}

.drink-card {
  position: relative;
  height: 280px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s;
  background-image: url('/coffee/default_img.jpg');
}

.drink-card:hover {
  transform: translateY(-6px);
}

.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 60%);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  transition: background 0.3s ease;
}

.overlay h3 {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}

.overlay p {
  margin: 6px 0 0;
  font-size: 14px;
  color: #ddd;
}
</style>
